<template>
  <div class="J-keyboard pl line-top line-bottom active">
    <div class="keyboxL line-top line-bottom">
      <div class="keyboxR line-left">
        <ul class="keyboard line-right" >
          <li v-for="key in keyList" :class="{
          delete: key === 'delete',
           clear: key === '清空'}" v-text="key" @click="clickKey(key)"></li>
        </ul>
        <div class="keyboard-btn">
          <span class="btn delete" @click="clickKey('delete')"></span>
          <span class="btn pay-submit" :class={active:payActive} @click="paysubmit">确认支付</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  const util = require('~src/lib/util')
  export default {
    name: 'keyboard',
    props: {
      keyboardtext: String,
      payActive: Boolean,
      maxVal: {
        type: String,
        default: '9999'
      },
      CartInfo:{

      }
    },
    data () {
      return {
        keyboardText: '',
        keyList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '清空', '0', '·']
      }
    },
    methods: {
      inputRate (val) {
        var _this = this
        var inputVal
        // 判断油枪单数输入
        if (!_this.payActive && val.replace(/\D/g, '').length > 1) {
          _this.keyboardText = val.slice(0, 1)
          return
        }
        // 输入金额最大值判断
        if (parseInt(val) > _this.maxVal) {
          this.$store.dispatch('TOAST_SHOW', {content: '最大只能输入' + _this.maxVal, msg: true})
          _this.keyboardText = _this.maxVal
          return
        }
        // 输入金额正则判断
        inputVal = val.replace(/[^\d.]/g, '')
                      .replace(/^\./g, '')
                      .replace(/\.{2,}/g, '.')
                      .replace('.', '$#$').replace(/\./g, '')
                      .replace('$#$', '.').replace(/^\d+(\.\d{3})/g, _this.keyboardtext)
        if (val === '0.00') {
          inputVal = '0.01'
        }
        if ((val.substr(5, 1) === '0' || val.substr(8, 1) === '0') && val.indexOf('.') > 0) {
          inputVal = parseFloat(val)
        }
        if (val.substr(0, 1) === '0' && val.substr(1, 1) !== '.') {
          inputVal = '0'
        }
        _this.keyboardText = inputVal
      },
      clickKey (key) {
        var _this = this
        switch (key) {
          case '清空':
            _this.keyboardText = ''
            break
          case 'delete':
            let kbt = _this.keyboardText
            _this.keyboardText = kbt.length ? kbt.substring(0, kbt.length - 1) : kbt
            break
          default:
            if (key === '·') {
              key = '.'
            }
            _this.keyboardText += key.toString()
            _this.inputRate(_this.keyboardText)
            break
        }
      },
      paysubmit () {
        if (!this.payActive) {
          return
        }
        util.localItem.set('cart',JSON.stringify(this.CartInfo))
        this.$router.push('/pay')
      }
    },
    watch: {
      keyboardtext (val) {
        this.keyboardText = val
      },
      keyboardText (val) {
        this.$emit('on-keyboard-change', val)
      }
    }
  }
</script>
<style lang="scss">
.J-keyboard.line-bottom::after{
  bottom:74.8%;
}
.keyboxL.line-bottom::after{
  bottom:49.8%;
  right:25.1%;
}
.keyboxL.line-top::before{
  top:74.7%;
  right:25.1%;
}
.keyboxR.line-left::after{
  left:49.9%;
}
.keyboxR.line-left::before{
  left:25.1%;
}
.keyboard.line-right::after{
  right:24.9%;
}
.J-keyboard.active{
  bottom:0;
}
.J-keyboard{
  position: fixed;
  bottom:-100%;
  left:0;
  right:0;
  transition: bottom .3s;
  -webkit-transition: bottom .3s;
  background-color:#fff;
  .keyboard{
    padding-right:25%;
    overflow: hidden;
    li{
      width:33.33%;
      float:left;
      list-style: none;
      height:60px;
      line-height:60px;
      text-align: center;
      font-size:26px;
      &:active{
        background-color:#eee;
      }
    }
    li.clear{
      font-size:20px;
    }
  }
  .keyboard-btn{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    width:25.2%;
    .btn{
      display: block;
      text-align: center;
      font-size:26px;
    }
    .delete{
      height:24.7%;
      &:before{
        content: '';
        display: block;
        height:100%;
        background-image: url("/static/images/del.png");
        background-size:32px 32px;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
    .pay-submit{
      padding:55px 20px;
      height:75%;
      background-color:#e4e3e3;
      color:#525050;
      font-size:20px;
      position: relative;
      .totalPrice{
        position: absolute;
        top:25px;
        left:0;
        right:0;
        font-size:16px;
        text-align: center;
        &:before{
          content: '¥';
          font-size:12px;
          margin-right:2px;
          position: relative;
          top:-1px;
          vertical-align: bottom;
        }
      }
    }
    .pay-submit.active{
      background-color: #009900;
      color:#fff;
    }
  }
}
</style>
